<template>
  <div>当前鼠标位置</div>
  <div>x: {{ mouse.x }}</div>
  <div>y: {{ mouse.y }}</div>
  <div>当前点击次数：{{ count }}</div>
  <button @click="add">点击</button>
</template>

<script>
import { onMounted, onUnmounted, reactive, ref } from 'vue'

function useCount() {
  // 业务A:   数据
  const count = ref(0)
  // 业务A:   方法
  const add = () => {
    count.value++
  }
  return { count, add }
}

function useMouse() {
  // 业务B:   数据
  const mouse = reactive({
    x: 0,
    y: 0,
  })
  // 业务B:   方法
  const move = e => {
    mouse.x = e.pageX
    mouse.y = e.pageY
  }
  // 业务B:   声明周期钩子
  onMounted(() => {
    document.addEventListener('mousemove', move)
  })
  onUnmounted(() => {
    document.removeEventListener('mousemove', move)
  })

  return { mouse }
}

export default {
  setup() {
    const { count, add } = useCount()
    const { mouse } = useMouse()

    // template 模板中需要的数据或方法需要通过 return 返回
    return {
      count,
      add,
      mouse,
    }
  },
}
</script>
